<template>
  <div class="mod-monitor">
    <v-stage :config="stageConfig">
      <v-layer>
        <!-- 绘制机台 -->
        <v-rect v-for="(machine, index) in machines" :key="'machine-' + index" :config="machine.config"
          @click="handleMachineClick(machine)" @dblclick="handleDbClick(machine)" @mouseleave="handleMachineLeave" />

        <!-- 绘制连接线 -->
        <v-line v-for="(line, index) in lines" :key="'line-' + index" :config="line.config" />

        <!-- 悬浮提示框 -->
        <!-- <v-text :config="textConfig" /> -->
        <v-text v-for="(text, index) in texts" :key="'text-' + index" :config="text.config" />
      </v-layer>
    </v-stage>
    <!-- 弹窗, 新增 / 修改 -->
    <MonitorShow ref="monitorShowRef"></MonitorShow>
  </div>
</template>

<script>
import jsonData from "@/assets/json/data.json"
import MonitorShow from './monitor-show'
export default {
  data() {
    return {
      webSocket: null,
      wsUrl: 'ws://localhost:8088/mcs-admin/monitor',
      stageConfig: { width: 1400, height: 800 },
      // 机台数据
      machines: jsonData.machines,
      // 连接线数据
      lines: jsonData.lines,
      texts: jsonData.texts,
      // 悬浮提示框相关数据
      hoveredMachine: null, // 当前悬浮的机台
    }
  },
  components: {
    MonitorShow
  },
  mounted() {
    this.setUpWebSocket();
  },
  methods: {
    setUpWebSocket() {
      this.webSocket = new WebSocket(this.wsUrl); this.webSocket.onopen = e => {
        console.log("连接打开", this.webSocket.readyState);

        // this.webSocket.send("hello");
      };
      this.webSocket.onclose = e => {
        console.log(`连接关闭: code=${e.code}, reason=${e.reason}`)
      };
      // 收到消息
      this.webSocket.onmessage = e => {
        let jsonList = JSON.parse(e.data);
        //对数据进行处理
        jsonList.forEach(element => {
          this.machines.forEach(item => {
            if (item.id == element.id) {
              // console.log(element)
              item.config.stationId = element.stationId;
              item.config.fill = element.fill;
              item.config.contType = element.contType;

              item.config.isFull = element.isFull;
              item.config.status = element.status == 0 ? "无" : "有";
            }
          });

          this.texts.forEach(item => {
            if (item.id == element.id) {
              item.config.text = element.id + '\n料架编号:' + element.contNo + '\n料架类型:' + element.contType;
            }
          })
        });
      }
      // 异常
      this.webSocket.onerror = e => {
        console.log("连接异常!causyBy:", e)
      };
    },
    callback() {
      console.log("被调用了")
    },
    // 处理机台点击事件
    handleMachineClick(machine) {
      console.log("点击了机台:", machine.id);
      this.hoveredMachine = machine;
      this.$nextTick(() => {
        this.$refs.monitorShowRef.dataForm.id = machine.config.stationId;
        this.$refs.monitorShowRef.init();
      })
      //const curMachine = this.machines.find(item => item.id === machine.id);

      // const showMsg = this.texts.find(item => item.id === "ST_PIN");
      // showMsg.config.text = "站点：[" + machine.id + "];料架：<" + machine.config.status + ">;空满：<" + machine.config.isFull + ">;料架类型：<" + machine.config.contType + ">";
    },
    handleDbClick(machine) {
      console.log("双击了机台:", machine.id);
      const modal = document.getElementById("modal");
      modal.style.display = "flex"; // 显示弹窗
    },
    // 处理机台悬浮事件
    handleMachineHover(machine) {
      this.hoveredMachine = machine; // 设置当前悬浮的机台

      // 根据机台的位置设置提示框的位置
      // const { x, y, width, height } = machine.config;
      // const offset = 10; // 提示框与机台的偏移量

      // 提示框显示在机台的下方
      // this.tooltipConfig = {
      //   x: x + width / 2, // 提示框居中
      //   y: y + height - offset, // 提示框在机台下方
      //   visible: true,
      // };
    },
    // 处理鼠标离开事件
    handleMachineLeave() {
      this.hoveredMachine = null; // 清除悬浮的机台
      // this.tooltipConfig.visible = false; // 隐藏提示框
    },
  }
}
</script>

<style lang="scss">
.box-card {
  padding: 1 1px;
  font-size: 35px;
}

.itemData {
  margin-top: 5px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  font-weight: bolder;
  background-color: dimgrey;
  color: aliceblue;
}

#zoom {
  margin-top: 20px;
  min-height: 500px;
}

.stackers {
  width: 100%;
  margin-top: 10px;
  font-size: 18px;
  font-family: cursive;

  strong {
    font-size: 16px;
  }

  .el-tag {
    font-weight: bold;
  }

  .el-card__body {
    padding-top: 10px;
    width: 100%;

    .card-col {
      // max-width: 100%;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .stacker-row {
    width: 100%;

    // display: flex;
    // justify-items:stretch;
    .el-col-12 {
      width: 49%;
    }

    .stacker-col {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border: 1px solid #EBEEF5;
      border-radius: 5px;
      padding: 0 10px 10px;

      // background: red;
      .forks {
        margin-top: 10px;

        .fork-card {
          // background: dimgrey;
          // opacity: 0.5;
          // color: #fff;
          height: 290px;

          .fork-content {
            max-width: 96%;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .instruct {
            padding-left: 15px;

            // max-width: 96%;
            .ins-detail {
              margin-top: 5px;
              overflow-x: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              span {
                font-size: 16px;
              }

              strong {
                font-size: 14px;
              }
            }
          }

          .el-card__body {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .card-col {
            margin: 10px 0;
          }

          .fork-title {
            margin: 0;
            text-align: center;
            font-weight: bold;
          }
        }
      }

      .stacker-status {
        background: #67C23A;
        text-align: center;
        margin: 0;
        padding: 10px 0 10px;
        border-bottom: 1px solid #EBEEF5;
        margin-bottom: 10px;
        font-size: 20px;
      }

      .top-status {
        .el-col {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

/* 双击区域样式 */
.double-click-area {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  /* 默认隐藏 */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  text-align: center;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
</style>